<template>
	<view class="zone">
		<Header title="实物兑换" color="#fff"></Header>

		<view class="main">

			<!-- tab部分 -->
			<view class="tab">
				<view v-for="(item,index) in tablist" :key="index" :class="[stat == item.id?'active':'']"
					@click="tabchange(item.id)">{{item.name}}</view>
			</view>

				<!-- 实物兑换水晶 -->
				<view class="list" v-for="(item,index) in datalist1" :key="item.id" v-show="stat == 1">
					<view class="listleft">
						<view class="pore">
							<image class="listimg" :src=" imgurl + item.img" mode="widthFix"></image>
						</view>
						<view class="word">
							<span class="name">{{item.name}}</span>
							<span class="possess">拥有数量： <text>{{item.num}}</text> </span>
							<view>
								<text>{{ parseInt(item.crystal) }}水晶/个</text>
							</view>
						</view>
					</view>
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="listright button" @click="exchange(item,index)">兑换</u-button>
				</view>

				<!-- 实物兑换银元 -->
				<view class="list" v-for="(item,index) in datalist2" :key="item.id" v-show="stat == 2">
					<view class="listleft">
						<view class="pore">
							<image class="listimg" :src=" imgurl + item.img" mode="widthFix"></image>
						</view>
						<view class="word">
							<span class="name">{{item.name}}</span>
							<span class="possess">拥有数量： <text>{{item.num}}</text> </span>
							<view>
								<text>{{ parseInt(item.crystal) }}银元/个</text>
							</view>
						</view>
					</view>
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="listright button" @click="exchange(item,index)">兑换</u-button>
				</view>
		</view>



		<!-- 奖励弹窗 -->
		<u-mask :show="show">
			<view class="warp">
				<view class="maskbox">
					<image class="topimg" src="http://img.cpgm.cc/panda/static/mask/laba.png" mode="widthFix" />
					<view class="wightbg">
						<p>{{exchangename}}获得</p>
						<image :src="stat==1?'http://img.cpgm.cc/panda/static/self/shuj.png':'http://img.cpgm.cc/panda/static/self/yb.png'" mode="widthFix" />
						<text>{{resultnum}}{{stat==1?'水晶':'银元'}}</text>
					</view>
				</view>
				<view class="mask_btn button" @click="show = false">开心收下</view>
			</view>
		</u-mask>


		
	</view>
</template>

<script>
import config from '@/common/config/index'
export default {
	data() {
		return {
			stat:1,
			tablist: [
				{
					id: 1,
					name: '兑换水晶',
				},
				{
					id: 2,
					name: '兑换银元',
					isrequit:false
				},
			],
			imgurl:config.imgurl,
			list:[],//使用的数据列表
			list2:[
				{
					id:1,
					img:'30.png',
					name:'果冻',
					num:0,
					yb:1,
				},
				{
					id:2,
					img:'31.png',
					name:'奶糖',
					num:0,
					yb:2,
				},
				{
					id:3,
					img:'32.png',
					name:'燕麦酸奶',
					num:0,
					yb:5,
				},
				{
					id:4,
					img:'33.png',
					name:'每日坚果',
					num:0,
					yb:10,
				},
				{
					id:5,
					img:'34.png',
					name:'洗面奶',
					num:0,
					yb:20,
				},
				{
					id:6,
					img:'35.png',
					name:'眼影',
					num:0,
					yb:50,
				},
				{
					id:7,
					img:'36.png',
					name:'口红',
					num:0,
					yb:100,
				},
				{
					id:8,
					img:'37.png',
					name:'耳机',
					num:0,
					yb:200,
				},
				{
					id:9,
					img:'38.png',
					name:'台式电脑',
					num:0,
					yb:350,
				},
				{
					id:10,
					img:'39.png',
					name:'对戒',
					num:0,
					yb:500,
				},
				{
					id:11,
					img:'40.png',
					name:'手表',
					num:0,
					yb:1000,
				},
				{
					id:12,
					img:'41.png',
					name:'布艺沙发',
					num:0,
					yb:2000,
				},
				{
					id:13,
					img:'42.png',
					name:'家电套组',
					num:0,
					yb:5000,
				},
			],
			datalist1: [],
			datalist2: [],
			isrequit:false,//用于判断是否请求过第二次
			show:false,
			show2:false,
			exchangename:'',
			price:'',
			shuijing:'',
			exchangesjname:'',
			resultimg:'',
			resultnum:'',
		}
	},
	onLoad() {
		this.exchangeList()
	},
	methods: {
		// tab切换
		tabchange(id) {
			this.stat = id
			if(id == 2 && !this.tablist.isrequit) {
				this.exchangeList2();
			}
		},
		// 获取列表
		async exchangeList(){
			let res = await this.$http.index.exchangeList({
				type:2,
			})
			this.datalist1 = res.data
		},
		// 获取列表
		async exchangeList2(){
			let res = await this.$http.index.exchangeList({
				type:3,
			})
			this.datalist2 = res.data
			this.tablist[1].isrequit = true
		},

		opentips(){
			this.$u.toast('即将正式上线')
		},

		// 兑换实物
		async exchange(item,index){
			// console.log(item);
			let res = await this.$http.index.exchangething({
				id:item.id
			})
			if(res.code == 1) {
				this.resultimg = this.imgurl +  item.img
					this.exchangename = res.msg
					this.resultnum = res.crystal
					this.show = true
					this.datalist1[index].num--
			}else {
				this.resultimg = ''
				this.$u.toast(res.msg)
			}
		},

		// 兑换银元
		async exchange2(item,index){
			// console.log(item);
			let res = await this.$http.index.exchangething({
				id:item.id
			})
			if(res.code == 1) {
				this.resultimg = this.imgurl +  item.img
					this.exchangename = res.msg
					this.price = res.price
					this.show2 = true
					this.datalist2[index].num--
			}else {
				this.resultimg = ''
				this.$u.toast(res.msg)
			}
		},
	}
}
</script>

<style lang="less" scoped>

.zone {
	background: linear-gradient(180deg, #0477FD 0%, #7AFDCF 100%);
	min-height: 100vh;
}

.main {
	padding: 12px 12px;
}

// tab导航
	.tab {
		width: 100%;
		display: flex;
		align-items: center;
		background: rgba(255,255,255,0.7);
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		border-radius: 5px;
		padding: 5px;
		overflow: hidden;
		margin: 10px auto;
		border-radius: 7px;
		// backdrop-filter: blur(50px);

		view {
			width: 50%;
			height: 42px;
			text-align: center;
			line-height: 42px;
			color: #343434;
			font-size: 13px;
			font-weight: 600;
			border-radius: 7px;
		}
	}

	.active {
		color: #FFFFFF !important;
		background: #000000 !important;
	}


.inner {
	height: calc(100vh - 78px - var(--status-bar-height));
	padding: 10px 0;
	border-radius: 10px;
	box-sizing: border-box;
}

// 实物兑换零钱
	.list {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: rgba(255,255,255,0.9);
		border-radius: 8px;
		padding: 10px;
		margin-top: 10px;
	}

	.listleft {
		flex: 1;
		display: flex;
		align-items: center;
	}
	.word {
		min-width: 40%;
		display: flex;
		flex-direction: column;

		view {
			flex: 1;
			background: #fff;
			border-radius: 10px;
			padding: 2px 5px;

			text {
				font-size: 12px;
				zoom: 0.96;
				font-weight: bold;
				color: #fff;
				line-height: 16px;
				background: linear-gradient(180deg, #FF2F00 0%, #FF8758 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}

	.listin {
		display: flex;
		flex-direction: column;
	}

	.name {
		font-size: 14px;
		font-weight: 600;
		color: #131314;
		line-height: 20px;
	}

	.possess {
		font-size: 12px;
		color: #343434;
		margin: 5px 0;

		text {
			color: #239D4C;
		}
	}
	.possess2 {
		font-size: 12px;
		color: #343434;

		text {
			color: #239D4C;
		}
	}

	.duihaun {
		font-size: 12px;
		font-weight: bold;
		color: #FF1700;
		line-height: 13px;
	}

	.listimg {
		width: 60px;
		padding: 0px;
		position: relative;
		background: linear-gradient(180deg, rgba(71, 179, 226, 0.21) 0%, rgba(101, 231, 255, 0.21) 100%);
		border-radius: 4px;
		margin-right: 10px;
	}

	.listright {
		width: 78px;
		text-align: center;
		background: url('http://img.cpgm.cc/panda/static/public/btn7.png');
		background-size: 100% 100%;
		height: 36px;
		font-size: 14px;
		font-weight: bold;
		color: #B73800;
		line-height: 36px;
		margin: 0;
		margin-top: 10px;
	}

	// 红包兑换零钱
	.list2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.listimg2 {
		width: 52px;
		margin: 0 13px;
	}

	.listright2 {
		display: flex;
		flex-direction: column;
		align-items: center;

		span {
			font-size: 14px;
			font-weight: bold;
			color: #FEE46F;
			line-height: 15px;
			margin-bottom: 14px;
		}
	}






// 弹窗

.maskbox {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 47px 0px rgba(255,255,255,0.5), inset -5px -5px 47px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	padding: 15px;
	min-height: 300px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;

	.topimg {
		width: 35%;
		margin: 0 auto;
		margin-top: -25%;
	}

	h3 {
		color: #000000;
		font-size: 26px;
	}

	.wightbg {
		width: 100%;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 9px;
		padding: 20px 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 15px;

		p {
			position: relative;
			color: #000000;
			font-size: 20px;
			font-weight: 600;
			z-index: 2;
			padding: 0 10px;
		}

		p::after {
			content: '';
			width: 100%;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
			background-size: 100% auto;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		image {
			width: 30%;
			margin: 10px 0;
		}
		text {
			color: #000000;
			font-size: 20px;
			font-weight: 600;
		}
	}
}

.mask_btn {
	width: 50%;
	height: 58px;
	background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
	background-size: 100% 100%;
	margin: 0 auto;
	margin-top: 30px;
	color: #B73800;
	font-weight: 600;
	font-size: 18px;
}




</style>
